<script setup name="Home">
import useSiteData from '@/hooks/api/useSiteData'

const { site_config, site_config_loading, box_list, box_list_loading } = useSiteData()
const site_bg_image = computed(() => `url('${site_config.value?.background_image}') no-repeat fixed center center / cover`)
const site_text_color = computed(() => `${site_config.value?.site_name_color || '#fff'}`)
const site_name = computed(() => `${site_config.value?.site_name || '标题'}`)
const site_desc = computed(() => `${site_config.value?.site_desc || '描述'}`)
const box_background_color = computed(() => `${site_config.value?.box_background_color || '#fff'}`)
const box_back_hover_color = computed(() => `${site_config.value?.box_back_hover_color || '#fff'}`)
const box_title_color = computed(() => `${site_config.value?.box_title_color || '#fff'}`)
const box_link_color = computed(() => `${site_config.value?.box_link_color || '#fff'}`)
const box_link_hover_color = computed(() => `${site_config.value?.box_link_hover_color || '#fff'}`)
const box_link_align = computed(() => `${site_config.value?.box_link_align || 'center'}`)

</script>

<template>
  <div class="front">
    <!-- bg -->
    <div class="bg-wrapper"></div>

    <!-- header -->
    <home-header></home-header>

    <!-- title -->
    <home-title :site-name="site_name" :site-desc="site_desc"></home-title>

    <!-- search -->
    <home-search></home-search>

    <!-- box-list -->
    <app-loading v-if="box_list_loading"></app-loading>
    <home-boxes :box-list="box_list"></home-boxes>

    <!-- footer -->
    <home-footer></home-footer>
  </div>
</template>

<style lang="scss" scoped>
@import "../assets/styles/_mixin";

.front {
  @apply w-full h-full;

  --site-text-color: v-bind(site_text_color);
  --box-link-align: v-bind(box_link_align);
  --box-background-color: v-bind(box_background_color);
  --box-background-hover-color: v-bind(box_back_hover_color);
  --box-title-color: v-bind(box_title_color);
  --box-link-color: v-bind(box_link_color);
  --box-link-hover-color: v-bind(box_link_hover_color);

  @include scroll-hidden;

  color: var(--site-text-color);
}

/* stylelint-disable-next-line rule-empty-line-before */
.bg-wrapper {
  @apply w-full h-full fixed -z-10;

  background: v-bind(site_bg_image);
}
</style>
